define(function(require, exports, module) {
  var Backbone = require('backbone');
  var $ = require('jquery');
  var _ = require('underscore');
  var jsonview = require('jsonview');
  var tmpl = require('text!../tmpl.html');

  // echarts@"3.8.5" echarts-gl@"1.0.0-beta.6"
  require('echarts-gl')
  var echarts = require('echarts') //3.8.5|4.0.2|4.2.1用这种
  // var echarts = require('js/echarts'); //3.2.2用这种
  var chinaJson = require('json!/npm/show-react16-r15.20-uyuncomponents/node_modules/echarts/map/json/china.json');
  echarts.registerMap('china', chinaJson);

  var env = window.env;

  var geo3d = require('v/graph/option/geo-3d')
  var lines3d = require('v/graph/option/lines-3d')
  var geo = require('v/graph/option/geo-scatter')
  var themeRiver = require('v/graph/option/theme-river')
  var barPolar = require('v/graph/option/bar-polar')
  var globlePopular = require('v/graph/option/globle-popular/index')
  function main() {
    var $app = $('<div id="app">').width(env.w).height(env.h)
    $('#main').html($app);

    var chart = echarts.init($app[0]);
    globlePopular(chart)

    var $app2 = $('<div id="app2">').width(env.w).height(env.h)
    $('#main').append($app2);

    var chart2 = echarts.init($app2[0]);
    chart2.setOption(barPolar);

    ['click', 'mouseover', 'mouseout'].forEach(function(eventName) {
      chart.on(eventName, function() {
        console.log(eventName, arguments)
      })

      chart2.on(eventName, function() {
        console.log(eventName, arguments)
      })
    })

    $('#main').append(tmpl);
    $('#reset').click(function() {
      lines3d.geo3D.viewControl.alpha = 30;
      chart.setOption(lines3d);
    })
  }

  return main;
})